Create an interactive travel project

Introduction

Interactive project final result

This tutorial explains how to create a simple interactive project for travel agencies in Elementi. The project has a main content area and two buttons on the side that allow changing the default content when clicking on them. For this project, we are going to use the "Click to Switch" interactive widget and two images which are displayed when clicking on the buttons.

Step-by-step instructions about how to create the interactive project are provided below, as well as a video tutorial. Otherwise, a sample project can be downloaded from the link below.

This interactive project is intended to be used on a touchscreen connected to the HMP.

Note:

For this tutorial, the project model was set to "HMP300", yet any other HMP device model (HMP350, HMP200, HMP130, HMP100) can be used as well.

Video

For full screen, see this video on Vimeo.

Tutorial

Interactive travel project

Version: 1.0 (revision history)

Release date: 2016-01-29

• Difficulty: Easy.
• Total duration: 5–10 minutes.
• Requirements:
  • Elementi software (the latest version is recommended).
  • HMP400/W (with DSOS KIOSK or SYSTEMS license), HMP350, or HMP300
  • Displaying device / touchscreen

Getting started

The first step is to create a new project and set its name, model, format and duration.

• If you need more details about this step, check out "My first Elementi project" tutorial as well.
• For this tutorial, "HMP300" was selected as model - make sure to select the project model according to your HMP device model.
• The format was set to 16:9 and the duration to automatic.

Once the project has been created, double-click on its icon to open it.

• Inside the project, there is a single file called "index.svg", which doesn't contain any layers for now (we'll take care of that later). This is the master layout.
• The rightmost tab in the Browse panel takes the name of the project, and the index file is automatically opened in the Preview panel.

Import the interactive widget

Import the "Click to Switch" widget

Next, let's import the "Click to Switch" widget into the current project. For that, follow these steps:

1. Click on the "Widgets" tab and browse to "Interactivity" folder.
2. Drag & drop the "Click to Switch" widget from the Browse panel into Preview panel (or Edit panel) to import the widget into the project.
3. Right-click on the widget layer within the Preview panel and select "Fit Screen" option.
4. Click on the project tab (the rightmost one) in the Browse panel to get back to the project view. Notice that the widget file was automatically copied within.

Import media content

The next step is to import some media content into the project. To do so, follow these steps:

1. Right-click within the Browse panel and select "New Collection..." option. Give it a name, like "media".
2. Double-click on its icon to open it.
3. Drag and drop the files from Windows Explorer into the Browse panel to import the files.
   • For more details about this step, see this video tutorial about importing media into the project.
   • For this tutorial, we'll use two images - you can also use videos, layouts or plain text.

Set up the interactive widget

Set up the interactive widget - part 1

Set up the interactive widget - part 2

Interactive project final result

Next, let's set up the "Click to Switch" widget to use the media imported before. For that, follow these steps:

1. Double-click on the "Click to Switch" layer within the Edit panel.
   • You can add a transition or modify the properties of the layer displaying the content if needed.
2. Click on the "Mappings" tab.
3. Click on (the "Layer Properties" button) for the first layer ("Default Page"). This opens the Layer Properties dialog.
4. Click on the "Edit Text" tab and change the text to something like: "Check out our top destinations for this month!".
5. Click on the "OK" button.
6. Drag & drop the first image on top of the default "Page 1" layer.
7. Click on (the "Layer Properties" button) of this layer.
8. Set the "Media fit" to "Slice" by clicking on the third button. This is to ensure that the image fills up the entire layer, while keeping the image aspect.
9. Click on the "OK" button.
10. Drag & drop the second image on top of the default "Page 2" layer, and do the same adjustment (steps 7 to 9).

Note:

If you specify a fixed duration for the image layers (e.g., under "Layer Properties", set Duration to "10s"), then the image is displayed for that amount of time and afterward the widget switches back to the default text content.

Now, let's change the text on the buttons next.

1. Click on (the "Layer Properties" button) for the first button layer ("Button 1)".
2. Click on the "Edit Text" tab and change the text to "Bali".
3. Click on (the "Layer Properties" button) for the second button layer ("Button 2)".
4. Click on the "Edit Text" tab and change the text to "Maldives".

Since we don't need the exit button, because we are not using the widget inside a playlist, we can delete it - for that right-click on the button row and select "Delete".

Finally, click on the "Save" button on the toolbar to save all the changes.

Test the interactive project

To test this project in Elementi, follow these steps:

1. Enable the interactive mode by pressing the F12 key (full-screen preview) or by clicking on the "hand" button within the Preview panel.
2. Click on the two buttons, "Bali" and "Maldives", and watch the text content being replaced by images.

To test this project with a touchscreen, follow these steps:

1. Configure the HMP for interactivity.
2. Publish the interactive project to an HMP device.
3. Click on the two buttons, "Bali" and "Maldives", and watch the text content being replaced by images.

Note:

If you don't have a touchscreen, you can connect a USB mouse to the HMP - make sure to add a mouse cursor to the interactive project.

See also

• Interactivity
• Interactivity via USB
• Interactive widgets
• USB button tutorial
• How to create an interactive project using Action to Switch widget